<template>
	<view class="order-logistics" :class="themeName">
		<view v-if="orderInfo.chanjet_enabled && !check_flag">
			<u-card title="" sub-title="" thumb="" :show-head="false" :show-foot="false"
				v-for="item,idx in chanjet_outbound" :key="idx">
				<view slot="body">
					<view class="m-b-20">发货数据</view>
					<view>{{$zhTran('出库单编码')}}：{{item.code}}</view>
					<view>{{$zhTran('快递公司')}}：{{item.transporttype_name}}</view>
					<view>{{$zhTran('运单号')}}：{{item.transdocno}}</view>
					<view class="flex row-between">
						<view>{{$zhTran('发货状态')}}：{{item.logisticsstatus_name}}</view>
						<u-button size="medium" v-if="item.code!=''" @click="queryLogistics(item)">查看物流</u-button>
					</view>

					<u-divider color="#ddd" half-width="100%" margin-top="20" margin-bottom="20"
						:use-slot="false"></u-divider>
					<view>发货明细</view>
					<view v-for="val,idx2 in item.detail" :key="idx2" class="flex m-t-20">
						<u-avatar :src="val.goods_image" mode='square' img-mode="widthFix" size="130"></u-avatar>
						<view class="m-l-20" style="width: 100%;">
							<view class="line-2" style="min-height: 60rpx;">{{val.rdrecorddetails_inventory_name}}
							</view>
							<view>{{$zhTran('本次发数量')}}：{{val.rdrecorddetails_quantity}}</view>
						</view>
					</view>
				</view>
			</u-card>
			<u-card title="" sub-title="" thumb="" :show-head="false" :show-foot="false">
				<view slot="body">
					<view class="m-b-20">发货汇总</view>
					<view v-for="val,idx2 in orderInfo.order_goods" :key="idx2" class="flex m-t-20">
						<u-avatar :src="val.goods_image" mode='square' img-mode="widthFix" size="130"></u-avatar>
						<view class="m-l-20" style="width: 100%;">
							<view class="line-2" style="min-height: 60rpx;">{{val.goods_name}}
							</view>
							<view class="flex row-between">
								<view>{{$zhTran('购买数量')}}：{{val.goods_num}}</view>
								<view>{{$zhTran('已发数量')}}：{{val.chanjet_send_num}}</view>
							</view>
						</view>
					</view>
				</view>
			</u-card>
		</view>
		<view v-else>
			<view class="express m-t-20">
				<!-- 商品图片 -->
				<view class="express-goods" :data-count="order.goods_count">
					<u-image width="100%" height="100%" mode="scaleToFill" :src="order.goods_image" />
				</view>
				<!-- 快递信息 -->
				<view class="express-info">
					<text class="md">{{ getOrderStatusToName(order.order_status) }}</text>
					<text class="sm m-t-10">{{$zhTran('物流公司')}}：{{ order.express_name || '--' }}</text>
					<view class="sm m-t-10 flex">
						<text>{{$zhTran('快递单号')}}：{{ order.invoice_no || '--' }}</text>
						<template v-if="order.invoice_no && order.send_type === 1">
							<view class="m-l-30" :style="{color: themeColor}" @click.stop="$copy(order.invoice_no)">
								{{$zhTran('复制')}}
							</view>
						</template>
					</view>
				</view>
			</view>

			<view class="logistics m-t-20">
				<u-time-line>
					<!-- 收货地址 -->
					<u-time-line-item>
						<template v-slot:node>
							<view class="node-icon node-icon--active">
								<text class="white">{{$zhTran('收')}}</text>
							</view>
						</template>
						<template v-slot:content>
							<view class="node-title">
								<text>{{ take.contact }}</text>
								<text class="m-l-20">{{ take.mobile }}</text>
							</view>
							<view class="node-desc">{{ take.address }}</view>
						</template>
					</u-time-line-item>

					<!-- 交易完成 -->
					<u-time-line-item v-if="order.order_status === 3">
						<template v-slot:node>
							<view class="node-icon node-icon--active">
								<u-icon name="checkmark" color="#fff" />
							</view>
						</template>
						<template v-slot:content>
							<view class="node-title">{{ finish.title }}</view>
							<view class="node-desc">{{ finish.tips }}</view>
							<view class="node-time">{{ finish.time }}</view>
						</template>
					</u-time-line-item>

					<!-- S 运输 -->
					<u-time-line-item v-if="delivery.new_trace">
						<template v-slot:node>
							<view class="node-icon node-icon--active">
								<u-icon name="car-fill" color="#fff" />
							</view>
						</template>
						<template v-slot:content>
							<view class="node-title">{{ delivery.title }}</view>
							<view class="node-desc">{{ delivery.new_trace[1] }}</view>
							<view class="node-time">{{ delivery.new_trace[0] }}</view>
						</template>
					</u-time-line-item>
					<block v-for=" (item, index) in delivery.traces" :key="index">
						<u-time-line-item>
							<template v-slot:content>
								<view class="node-desc">{{ item[1] }}</view>
								<view class="node-time">{{ item[0] }}</view>
							</template>
						</u-time-line-item>
					</block>
					<!-- E 运输 -->

					<!-- 发货 -->
					<u-time-line-item v-if="order.order_status === 2">
						<template v-slot:node>
							<view class="node-icon node-icon--active">
								<u-icon name="bell-fill" color="#fff" />
							</view>
						</template>
						<template v-slot:content>
							<view class="node-title">{{ shipment.title }}</view>
							<view class="node-desc">{{ shipment.tips }}</view>
							<view class="node-time">{{ shipment.time }}</view>
						</template>
					</u-time-line-item>

					<!-- 支付 -->
					<u-time-line-item v-if="pay">
						<template v-slot:node>
							<view class="node-icon node-icon--active">
								<u-icon name="red-packet-fill" color="#fff" />
							</view>
						</template>
						<template v-slot:content>
							<view class="node-title">{{ pay.title }}</view>
							<view class="node-desc">{{ pay.tips }}</view>
							<view class="node-time">{{ pay.time }}</view>
						</template>
					</u-time-line-item>

					<!-- 下单 -->
					<u-time-line-item>
						<template v-slot:node>
							<view class="node-icon node-icon--active">
								<u-icon name="file-text-fill" color="#fff" />
							</view>
						</template>
						<template v-slot:content>
							<view class="node-title">{{ buy.title }}</view>
							<view class="node-desc">{{ buy.tips }}</view>
							<view class="node-time">{{ buy.time }}</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
			<view class="m-20" v-if="orderInfo.chanjet_enabled">
				<u-button @click="check_flag = false" type="primary">返回</u-button>
			</view>
		</view>
		<w-jishuzhichi class="jishuzhichi-nodata" />
	</view>
</template>

<script>
	import {
		apiOrderDetail,
		apiOrderLogistics
	} from '@/api/order'
	import {
		apiIntegralOrderTraces
	} from '@/api/integral_mall'
	export default {
		name: 'OrderLogistics',

		data() {
			return {
				order_id: '', // 订单ID
				order: {}, // 订单信息
				take: {}, // 收货人信息
				finish: {}, // 交易完成信息
				delivery: {}, // 物流信息
				shipment: {}, // 发货信息
				pay: {}, // 支付信息
				buy: {}, // 下单信息
				orderInfo: {},
				check_flag: false
			}
		},
		computed: {
			chanjet_outbound() {
				return this.orderInfo.chanjet_order_option?.chanjet_outbound || []
			}
		},

		methods: {
			// 初始化物流数据
			initLogisticsData() {
				const api = this.type == 'integral' ? apiIntegralOrderTraces({
					id: this.order_id
				}) : apiOrderLogistics({
					id: this.order_id
				})
				api.then(ndata => {
					let data = this.$zhTran(ndata)
					this.order = data.order
					this.take = data.take
					this.finish = data.finish
					this.shipment = data.shipment
					this.pay = data.pay
					this.buy = data.buy
					return data
				}).then(data => {
					const traces = data.delivery?.traces
					// 【运输中】数据结构格式化
					if (traces.length) {
						const newTrace = traces.shift()
						data.delivery = {
							...data.delivery,
							new_trace: newTrace
						}
					}
					this.delivery = this.$zhTran(data.delivery)
				})
			},
			initOrderData() {
				apiOrderDetail({
						id: this.order_id,
					})
					.then((ndata) => {
						let data = this.$zhTran(ndata)
						this.orderInfo = data;
						if (!data.chanjet_enabled)
							this.queryLogistics({
								code: ''
							})
					})
					.then(() => {
						console.log(this.chanjet_outbound)
					})
					.catch((err) => {});
			},
			queryLogistics(row) {
				apiOrderLogistics({
					id: this.order_id,
					other_code: row.code,
				}).then(ndata => {
					let data = this.$zhTran(ndata)
					this.order = data.order
					this.take = data.take
					this.finish = data.finish
					this.shipment = data.shipment
					this.pay = data.pay
					this.buy = data.buy
					this.check_flag = true
					return data
				}).then(data => {
					const traces = data.delivery?.traces
					// 【运输中】数据结构格式化
					if (traces.length) {
						const newTrace = traces.shift()
						data.delivery = {
							...data.delivery,
							new_trace: newTrace
						}
					}
					this.delivery = this.$zhTran(data.delivery)
				})
			},
			// 获取订单状态名称
			getOrderStatusToName(status) {
				let desc = ''
				switch (status) {
					case 0:
						desc = '已下单'
						break;
					case 1:
						desc = '待发货'
						break;
					case 2:
						desc = '待收货'
						break;
					case 3:
						desc = '交易完成'
						break;
					case 4:
						desc = '已关闭'
						break;
				}

				return this.$zhTran(desc)
			}
		},

		async onLoad() {
			const options = this.$Route.query

			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			try {
				if (!options.order_id) throw new Error('物流异常')
				this.order_id = options.order_id
				this.type = options.type
				if (this.type == 'integral') {
					await this.initLogisticsData()
				} else {
					await this.initOrderData()
				}
			} catch (err) {
				console.log(err)
				setTimeout(() => {
					this.$Router.back()
				}, 0.5 * 1000)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.order-logistics {
		// padding: 0 20rpx;
	}

	.express {
		display: flex;
		align-items: center;
		height: 200rpx;
		padding: 20rpx 24rpx;
		background-color: #FFFFFF;

		&-goods {
			position: relative;
			width: 160rpx;
			height: 160rpx;

			&::before {
				z-index: 9;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				display: block;
				content: "共" attr(data-count)"件商品";
				padding: 5rpx 20rpx;
				font-size: $-font-size-xs;
				text-align: center;
				border-radius: 60px;
				background-color: rgba(0, 0, 0, .6);
				color: #FFFFFF;
			}
		}

		&-info {
			display: flex;
			flex-direction: column;
			margin-left: 24rpx;
		}
	}

	.logistics {
		padding: 30rpx 24rpx 30rpx calc(24rpx + 40rpx/2);
		background-color: #FFFFFF;

		.node-icon {
			width: 40rpx;
			height: 40rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;

			&--active {
				@include background_linear()
			}
		}

		.node-title {
			font-weight: 500;
			font-size: $-font-size-nr;
			color: $-color-black;
		}

		.node-desc {
			margin-bottom: 6rpx;
			font-size: $-font-size-sm;
			color: $-color-lighter;
		}

		.node-time {
			color: $-color-muted;
			font-size: $-font-size-sm;
		}
	}
</style>